<template>
  <transition name="slide-fade">
    <div>
      <home-header :title="address.name">
          <router-link tag="div" class="search" to="/search" slot="left">
            <span class="iconfont icon-fangdajing"></span>
          </router-link>
          <router-link tag="div" class="login" :to="userInfo._id ? '/userinfo' : '/login'" slot="right">
             <span class="header_login_text" v-if="!userInfo._id">
               登录 | 注册
             </span>
            <span class="header_login_text" v-else>
              <i style="font-size: 14px" class="iconfont icon-gerenkuang"></i>
            </span>
          </router-link>
        </home-header>
      <ul class="miste-content-wrapper" ref="wrapper">
        <li class="miste-content">
            <!--首页轮播图-->
            <home-swiper/>
            <!--首页附近商家-->
            <div class="shopList">
               <div class="title">
                 <a href="javascript:" class="iconfont icon-xuanxiang"></a>
                   <span>附近</span>
               </div>
               <shop-list/>
           </div>
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
import HomeHeader from '../../components/headertop/HeaderTop'
import HomeSwiper from './components/Swiper_1'
import ShopList from '../../components/shoplist/ShopList'
import BScroll from 'better-scroll'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      title: '济南市市中区经四路万达广场B座',
      mySwiper: null
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    ShopList
  },
  mounted () {
    this.getShopList() // 在store的actions中 获取商家列表信息
    this.scroll = new BScroll('.miste-content-wrapper', { // 需要滚动的容器不能设置高度，，另外滚动的容器的子元素如果有浮动，父元素一定要清除浮动，另外当左右两边都有滚动的时候，不能用浮动，需要用绝对定位，否则滚动会导致布局乱了：
      click: true
    })
  },
  methods: {
    ...mapActions(['getShopList']) // 调方法
  },
  computed: {
    ...mapState(['address', 'userInfo']) // 在store的state中 调值
  }
}
</script>

<style lang="stylus" scoped>
  .search
    width 20%
    span
      padding-left 10px
      font-size 50px
      color white
  .login
    width 30%
    text-align right
    span
      font-size 28px
      color white
      line-height 50px
  .shopList
    background white
    margin-top 20px
    padding 3px
    .title
      margin-bottom 20px
      a
        font-size 30px
        color: #989898
      span
        font-size 28px
        color: #989898
  .miste-content-wrapper
    position fixed
    top: 0
    bottom: 0
    width: 100%
  .slide-fade-enter-active {
    transition: all 1.8s ease;
  }
  .slide-fade-leave-active {
    transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
  }
</style>
